<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <script src="lib/jquery-2.1.4.min.js"></script>
    <script src="lib/jquery.jsonp-2.4.0.min.js"></script>
    <script src="http://n.wenshendaka.com/lib/iNahoo.Encoder/src/0.0.0/iNahoo.Encoder.js"></script>
    <script src="http://n.wenshendaka.com/lib/Tattoo.sdk/src/0.0.2/Tattoo.sdk.js"></script>
    <script src="lib/ex.js"></script>
    <script src="lib/template.js"></script>
    <script>
        var id, html, api;
        api = 'http://api.wenshendaka.com/';
        //api = 'http://api.dev.wenshendaka.com/';
    </script>
    <style>
        html {
            font-family: '微软雅黑', '黑体', sans-serif;
            background-color: #f0f0f0;
        }

        * {
            padding: 0;
            margin: 0;
        }

        a:link, a:active {
            text-decoration: none;
        }

        a {
            padding: 0 10px;
            margin-bottom: 10px;
            display: block;
        }

        a:first-child {
            margin-top: 10px;
        }

        a > div {
            background-color: white;
            border-radius: 5px;
            border: solid 1px #dddddd;
            padding: 10px 10px 0 10px;
        }

        img {
            display: block;
            width: 100%;
        }

        h1 {
            font-weight: normal;
            font-size: 18px;
            color: #1a1a1a;
            padding: 4px 0;
        }

        p {
            font-size: 12px;
            color: #dddddd;
            padding: 4px 0 10px 0;
        }

        h2 {
            font-weight: normal;
            padding: 8px 0 0 0;
            font-size: 12px;
            color: #888888;
            line-height: 20px;
        }

        .row {
            margin: 8px 0 0 0;
            padding: 12px 0;
            border-top: solid 1px #eeeeee;
            font-size: 14px;
            color: #1a1a1a;
            vertical-align: middle;
        }

        .row > * {
            display: inline-block;
        }

        .row::after {
            content: '';
            display: block;
            height: 100%;
            clear: both;
        }

        .arrow-right {
            margin-top: 6px;
            float: right;
            width: 8px;
            height: 8px;
            border-top: solid 2px #aaaaaa;
            border-right: solid 2px #aaaaaa;
            transform: rotate(45deg);
            -o-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
        }
    </style>
</head>
<body>

<!--$if-->
<script type="text/html" id="content">
    {{each list}}
    <a data-href="{{$value.url}}" data-shareJSON="{{$value.shareJSON}}">
        <div>
            <h1>{{$value.title}}</h1>

            <p>{{$value.updated | dateFormat:'MM月dd日'}}</p>
            <img src="{{$value.image_urls[0]}}?imageView2/0/w/640" class="thumb">
            {{if $value.content}}<h2>{{$value.content}}</h2>{{/if}}
            <div class="row">
                <div>查看全文</div>
                <div class="arrow-right"></div>
            </div>
        </div>
    </a>
    {{/each}}
</script>
</body>
<script>
    var GoTo = function (el) {//跳转方法
        if ($GoTo)$GoTo(el);
    };
    var $GoTo = null;//真 - 跳转方法

    var offset = {
        save: function () {
            document.cookie = 'lastOffset=' + window.scrollY + '|';
        },
        load: function () {
            if (document.cookie.search(/lastOffset=/) < 0)return;
            var Y = document.cookie.match(/lastOffset=([0-9]*)\|/)[1];

            if (Y > 0)window.scrollTo(0, Y);

            document.cookie = 'lastOffset=0|';
        }
    };

    //判断是否在app内
    var sid = null;
    var iframUrl = 'http://n.wenshendaka.com/shareIframe/';
    tatoo.get('SessionId', function (obj) {
        tatoo.closeShare();
        if (navigator.userAgent.indexOf('Android') > -1) {
            sid = obj.sessionId;
        } else {
            sid = obj.SessionId.Value;
        }
    });
    setTimeout(function () {
        if (sid == null) {
            $GoTo = function (el) {
                //正常跳转
                offset.save();
                location.href = $(el).attr('data-href');
            }
        } else {
            $GoTo = function (el) {
                if (tatoo.platform == 'android') {
                    var json = $(el).attr('data-shareJSON');
                    var obj = JSON.parse(json);
                    tatoo.webShare(obj);
                    location.href = $(el).attr('data-href');
                }
                if (tatoo.platform == 'ios') {
                    offset.save();
                    var Json = iNEncoder.urlEncode($(el).attr('data-shareJSON'));
                    tatoo.pushStack(iframUrl + '?data=' + Json);
                }
            }
        }
    }, 200);

    try {
        id = location.search.match(/channelId=([^&\b]*)/)[1];
    } catch (e) {
        id = null;
    }
    ex.jsonp({
        debug: true,
        url: api + 'new/channel/feeds',
        method: "GET",
        data: {
            channelId: id,
            limit: 99999
        },
        success: function (obj) {
            console.dir(obj);
            obj.data.forEach(function (el, i) {
                el.shareJSON = JSON.stringify({
                    title: el.title,
                    image: el.image_urls[0],
                    url: el.url,
                    content: el.content
                })
            });
            $('body').html(template('content', {list: obj.data}));
            $('a').click(function () {
                GoTo(this);
            });
            offset.load();
        }
    });

    /**
     * 对日期进行格式化，
     * @param date 要格式化的日期
     * @param format 进行格式化的模式字符串
     *     支持的模式字母有：
     *     y:年,
     *     M:年中的月份(1-12),
     *     d:月份中的天(1-31),
     *     h:小时(0-23),
     *     m:分(0-59),
     *     s:秒(0-59),
     *     S:毫秒(0-999),
     *     q:季度(1-4)
     * @return String
     * @author yanis.wang
     * @see    http://yaniswang.com/frontend/2013/02/16/dateformat-performance/
     */
    template.helper('dateFormat', function (date, format) {

        //date:  YYYY-MM-DD hh:mm:ss

        //不是我傻，IOS非得这么写，坑。
        var t = date.match(/(\d*)-(\d*)-(\d*) (\d*):(\d*):(\d*)/);
        date = new Date(t[1], t[2] - 1, t[3], t[4], t[5], t[6]);

        var map = {
            "M": date.getMonth() + 1, //月份
            "d": date.getDate(), //日
            "h": date.getHours(), //小时
            "m": date.getMinutes(), //分
            "s": date.getSeconds(), //秒
            "q": Math.floor((date.getMonth() + 3) / 3), //季度
            "S": date.getMilliseconds() //毫秒
        };
        format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
            var v = map[t];
            if (v !== undefined) {
                if (all.length > 1) {
                    v = '0' + v;
                    v = v.substr(v.length - 2);
                }
                return v;
            }
            else if (t === 'y') {
                return (date.getFullYear() + '').substr(4 - all.length);
            }
            return all;
        });
        return format;
    });


</script>
</html>